{% extends "base.html" %}

{% block css %}
<link rel="stylesheet" href="/static/css/curator.css" />

{% endblock %}

{% block content %}
<div class="alert">
  <strong>Note: </strong>The data reports rendered on this page are cached for
  upto 1 hour.
</div>
<br />
<br />

<form action="/reporting" method="POST" class="form-inline">
  <div class="form-actions">
    <label>Select a report: </label>
    <select name="report_type">
      {% for views in report_options %}
        <option value="{{views}}">{{views}}</option>
      {% endfor %}
    </select>
    <button type="submit" class="btn">View Report</button>
  </div>
</form>

<br />
<br />
<br />

{% if reporting_lines %}

<div id="AttendancePercentagesPie"></div>
<br />
<br />
<table class="table" title="Reporting Data" 
       id="AttendancePercentages" 
       summary="Description of table" 
       data-attc-createChart="true"
       data-attc-colDescription="colDescription" 
       data-attc-colValues="colValue1" 
       data-attc-location="AttendancePercentagesPie" 
       data-attc-hideTable="false" 
       data-attc-type="column"
       data-attc-googleOptions='{"is3D":true}'
       data-attc-controls=''>
  <thead>
    <tr>
      <th id="colDescription">Description</th>
      <th id="colValue1">{{ value_description }}</th>
    </tr>
  </thead>
  <tbody>
    {% for row in reporting_lines %}
    <tr>
      <td>{{row.description}}</td>
      <td>{{row.total}}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

{% endif %}


{% endblock %}
{% block main_js_load %}
  <script type="text/javascript" src="//www.google.com/jsapi"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="/static/js/attc.googleCharts.js"></script>
{% endblock %}

